import { forwardRef } from "react";
import type { HTMLAttributes, ReactNode } from "react";
import { tw } from "~/utils/tw";

type TagProps = HTMLAttributes<HTMLSpanElement> & {
  children: ReactNode;
};

export const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
  { children, className, ...props },
  ref
) {
  return (
    <span
      ref={ref}
      className={tw(
        "mb-1 inline-flex justify-center rounded-2xl bg-gray-100 px-[8px] py-[2px] text-center text-[12px] font-medium text-gray-700",
        className
      )}
      {...props}
    >
      {children}
    </span>
  );
});
